@import "variable";
@import "common";

body {
  background: #f1f1f1;
}

.content {
  padding-top: 20px;
  .sub {
    float: left;
    width: 10%;
    dl {
      dt {
        height: 28px;
        line-height: 28px;
        color: #333;
        font-weight: 700;
        font-size: 16px;
      }
      dd {
        color: #666;
        line-height: 23px;
      }
    }
  }
  .main {
    width: 90%;
    float: left;
    .main-1 {
      .fc-msg {
        text-align: right;
        margin-bottom: 10px;
        b {
          margin: 0 15px;
        }
      }
      .user-info {
        background: url('../img/userinfo-bg.png') right top repeat-y #fff;
        padding: 15px 20px 15px 319px;
        margin-bottom: 20px;
        height: 180px;
        -webkit-border-radius: 86px 0 0 86px;
        -moz-border-radius: 86px 0 0 86px;
        border-radius: 86px 0 0 86px;
        .info-lcol {
          float: left;
          position: relative;
          width: 319px;
          left: -319px;
          padding-top: 25px;
          .user-img {
            float: left;
            margin: 0 10px 0 16px;
            width: 104px;
            height: 104px;
            text-align: center;

            a {
              display: inline-block;
              img {
                height: 100px;
                width: 100px;
              }
            }

          }
          .user-m {
            float: left;
            width: 188px;
            position: relative;
            p {
              margin-bottom: 5px;
              a {
                color: #005ea7;
              }
            }
            .u-name {

              font-size: 18px;
              font-weight: 700;
              a {
                color: #000;
              }
            }
            .u-level {
              i {
                background: url("../img/rank2014.gif");
                display: inline-block;
                height: 17px;
                margin-right: 5px;
                text-decoration: none;
                width: 17px;
                vertical-align: middle;
              }

            }
            .u-safe {
              i {
                background: url('../img/safe-rank2015.png') no-repeat 0 0;
                height: 14px;
                line-height: 0;
                overflow: hidden;
                width: 50px;
                margin: 3px 6px 2px 0;
                display: inline-block;
                vertical-align: middle;
              }
              .rank-1 {
                background-position: 0 0;
              }
              .rank-2 {
                background-position: 0 -15px;
              }
              .rank-3 {
                background-position: 0 -30px;
              }
              .rank-4 {
                background-position: 0 -45px;
              }
              .rank-5 {
                background-position: 0 -60px;
              }
              .rank-6 {
                background-position: 0 -75px;
              }
              .rank-low {
                color: #F44E41;
              }
              .rank-medium {
                color: #FC9836;
              }
              .rank-high {
                color: #693;
              }
            }
            .info-line {
              position: absolute;
              height: 180px;
              right: 0;
              top: -40px;
              border-left: 1px dotted #ddd;
              z-index: 1;
              .top-icon, .bottom-icon {
                display: block;
                position: absolute;
                overflow: hidden;
                width: 18px;
                height: 8px;
                left: -9px;
              }
              .top-icon {
                top: -1px;
                background: url("../img/info-top.png") no-repeat;
              }

              .bottom-icon {
                bottom: 0;
                background: url("../img/info-bottom.png") no-repeat;
              }
            }
          }

        }
        .info-rcol {
          float: left;
          width: 100%;
          margin-left: -319px;

          .user-counts {
            float: left;
            width: 35%;
            padding-top: 10px;
            ul {
              margin-left: 45px;
              margin-bottom: 0;

              li {
                float: left;
                width: 50%;
                margin: 0 0 15px;
                white-space: nowrap;
                height: 59px;
                i {
                  display: block;
                  width: 40px;
                  height: 40px;
                  overflow: hidden;
                  -webkit-transition: transform .2s ease-in 0s;
                  -moz-transition: transform .2s ease-in 0s;
                  transition: transform .2s ease-in 0s;
                  background: url('../img/ucount-icon.png') no-repeat;
                }
                em {
                  font-family: verdana;
                  color: #c91523;
                  font-weight: 700;
                  margin-left: 5px;
                  font-style: normal;
                }
                &:nth-child(2) i {
                  background-position: 0 -50px;
                }
              ;
                &:nth-child(3) i {
                  background-position: 0 -100px;
                }
              ;
                &:nth-child(4) i {
                  background-position: 0 -150px;
                }
                &:hover {
                  i {
                    transform: translateY(-5px);
                  }
                }

              }
            }

          }
          .acco-info {
            float: right;
            height: 150px;
            width: 65%;
            background: #f5f5f5;
            overflow: hidden;
            padding: 15px 0;
            ul {
              margin: 0;
              li {
                float: left;
                width: 33%;
                text-align: left;
                line-height: 24px;
                height: 120px;
                border-right: 1px dotted #ddd;
                padding-left: 15px;
                &:last-child {
                  border: none;
                }

                p {
                  margin: 0;
                  em {
                    font-style: normal;
                  }
                }
              }
            }
          }

        }
      }
      .mod-box {
        width: 73%;
        float: left;
      }
      .mod-main {
        padding: 10px;
        background-color: white;
        margin-bottom: 20px;
        .mt {
          display: block;
          padding: 10px;
          h3 {
            float: left;
            font-family: "Microsoft YaHei";
            font-size: 16px;
            color: #333;
            line-height: 20px;
            margin: 0;
            font-weight: 700;
          }
          a {
            float: right;
          }
        }
        .mc {
          .nocont-box {
            color: #999;
            text-align: center;
            margin: 100px 0;
            i {
              display: inline-block;
              vertical-align: middle;
              background: url("../img/nocont-icons.png") no-repeat;
              overflow: hidden;
              margin-right: 20px;
              width: 70px;
              height: 70px;
              background-position: 0 0;
            }

          }
          .nofocus {
            border-bottom: 1px dashed #ddd;
            padding: 80px 10px;
            margin: 0;
          }
        }

      }
      .focus-box {
        .extra-l {
          background: #f5f5f5;
          margin-left: 20px;
          overflow: hidden;
          float: left;
          height: 25px;
          line-height: 25px;
          span {
            padding: 0 10px;
            border-right: 1px solid #fff;
            display: inline-block;
            a {
              display: inline-block;
              em {
                margin: 0 5px;
                font-style: normal;
              }
            }
          }
        }
        .follow {
          position: relative;
          padding: 10px 20px 0 20px;
          zoom: 1;
          .ctrl {
            position: absolute;
            display: block;
            float: left;
            width: 19px;
            height: 159px;
            cursor: pointer;
            overflow: hidden;
            i {
              position: absolute;
              display: block;
              width: 19px;
              height: 31px;
              top: 50%;
              margin-top: -15px;
              overflow: hidden;
              z-index: 1;
            }
          }
          .prev {
            left: 0;
            i {
              background: url("../img/arrow.jpg") 0 0 no-repeat;
              &:hover {
                background: url(../img/arrow.jpg) 0 -31px no-repeat;
              }
            }
          }
          .next {
            right: 0;
            i {
              background: url("../img/arrow.jpg") -20px 0 no-repeat;
              &:hover {
                background: url(../img/arrow.jpg) -20px -31px no-repeat;
              }
            }

          }
          .slider-show {
            overflow: hidden;
            position: relative;
            margin: 0 15px;
            height: 180px;
            width: 95%;
            .slider-show-ctn {
              width: 100%;
              position: relative;
              left: 0;
              transition: all .5s;
              ul {
                margin: 0;
                overflow: hidden;
                li {
                  float: left;
                  text-align: center;
                  margin-right: 10px;
                }
              }
              .p-img {
                a {
                  display: block;
                  height: 130px;
                  width: 130px;
                  img {
                    width: 100%;
                    height: 100%;

                  }
                }
              }
              .p-price {
                font-family: verdana;
                color: #333;
                line-height: 25px;
                margin-bottom: 5px;
                .icon-down {
                  padding: 0 1px;
                  height: 16px;
                  line-height: 16px;
                  display: inline-block;
                  background: #e4393c;
                  color: #fff;
                }
              }
              .p-cut {
                background: #52cd62;
                color: #fff;
                padding: 0 5px;
                display: inline-block;
              }
            }
          }
        }
      }
    }
  }
}

.ad-box {
  float: right;
  width: 25%;
  .mod-main {
    height: 300px;
  }
}

.ad-img {
  float: left;
  width: 100%;
  a {
    display: block;
    img {
      height: 90px;
      width: 100%;
      border: none;
    }
  }
}
